<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<style>
			#areaA, #areaB{
				margin: 50px;
				width:700px; height:100px;
			}

		</style>
		<title>Disabling Menu Items</title>
	</head>
	<body>
	<script type="text/javascript" charset="utf-8">

	var menudata = [
		{ id:"1",value:"Translate...", open:1, data:[
			{id: "1.1", value:"English"},
			{ id: "1.2", value:"Slavic...", open:1, data:[
				{id: "1.2.1", value:"Belarus"},
				{ id: "1.2.2", value:"Russian"},
				{id: "1.2.3", value:"German"}

			]},
			{id: "1.3", value:"German"}
		]},
		{ id:"2",value:"Post..."},
		{ id:"3",value:"Info" }
	];

	var  menu = {
			id:"top_menu",
			view:"menu",
			type:{
				subsign:true
			},
			template:function(obj){
				if(obj.disabled)
					return "<span class='disabled'>"+obj.value+"</span>";
				return obj.value
			},
			data:[
				{ id:"1",value:"Translate...", submenu:[
					{id: "1.1", value:"English"},
					{ id: "1.2", value:"Slavic...", submenu:[
						{id: "1.2.1", value:"Belarus"},
						{ id: "1.2.2", value:"Russian", submenus:[
							"Belarus", "Russian", "Ukranian"
						]},
						{id: "1.2.3", value:"German"}

					]},
					{id: "1.3", value:"German"}
				]},
				{ id:"2",value:"Post..."},
				{ id:"3",value:"Info" }
			]
		};

		webix.ui({
			type:"space", cols:[
				{   type:"clean",
					width: 320,
					rows:[
						{template:"<i>Check disabled</i>", height: 30},
						{
							view: "tree",
							template:"{common.icon()} {common.checkbox()} {common.folder()} #value#",
							data:menudata
						},
						{ view:"template" }
					]
				},
				{ type:"wide", rows:[
					menu,
					{ view:"template" }
				]}
			]
		});
		$$("$tree1").attachEvent("onItemCheck",function(id,state){
			if(state)
				$$("top_menu").disableItem(id);
			else
				$$("top_menu").enableItem(id);
		})
</script>
	</body>
</html>